<template>
  <div class="hiddeBox">
    <div class="container">
      <div class="title">
        <h2 style="font-size: 2.625rem; padding-bottom: 20px">服务项目</h2>
        <p style="color: #4f7987; font-weight: 500">
          经广东省人力资源和社会保障厅批准、省民政厅核准登记、国家认定的一所省级消防职业培训学院
        </p>
      </div>
      <div class="bigcard">
        <div
          class="card col-12 col-sm-6"
          v-for="(item, index) in img"
          :key="index"
          :style="{
            backgroundImage: 'url(' + item.icon + ')',
          }"
        >
          <div
            class="mask"
            :style="{
              backgroundImage: 'url(' + item.iconMask + ')',
            }"
          >
            <div class="mask_box"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
let img = [
  {
    icon: "https://www.wzxfpx.com/wp-content/uploads/2023/05/初级.jpg",
    iconMask: "https://www.wzxfpx.com/wp-content/uploads/2023/05/初级培训.jpg",
  },
  {
    icon: "https://www.wzxfpx.com/wp-content/uploads/2023/05/中级.jpg",
    iconMask: "https://www.wzxfpx.com/wp-content/uploads/2023/05/中级培训.jpg",
  },
  {
    icon: "https://www.wzxfpx.com/wp-content/uploads/2023/07/WechatIMG1786.jpg",
    iconMask:
      "https://www.wzxfpx.com/wp-content/uploads/2023/07/WechatIMG1785.jpg",
  },
  {
    icon: "https://www.wzxfpx.com/wp-content/uploads/2023/05/社会消防安全培训-scaled.jpg",
    iconMask:
      "https://www.wzxfpx.com/wp-content/uploads/2023/05/社会消防-scaled.jpg",
  },

  {
    icon: "https://www.wzxfpx.com/wp-content/uploads/2023/05/安全生产培训.jpg",
    iconMask: "https://www.wzxfpx.com/wp-content/uploads/2023/05/安全生产.jpg",
  },
  {
    icon: "https://www.wzxfpx.com/wp-content/uploads/2023/05/消防工程维保检测.jpg",
    iconMask: "https://www.wzxfpx.com/wp-content/uploads/2023/05/消防工程.jpg",
  },
];
</script>

<style scoped lang="scss">
.hiddeBox {
  width: 100vw;
  padding-top: 6.25rem;
  background-color: #f5fafd;
  h2 {
    padding-bottom: 0.625rem;
  }
  .title {
    text-align: center;
    font-weight: 100;
  }
  .bigcard {
    display: flex;
    padding: 3.125rem 0;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
    gap: 60px;
    .card {
      position: relative;
      background-size: contain;
      background-repeat: no-repeat;
      width: 21.875rem;
      height: 18.75rem;
      border-radius: 1%;
    }
    .mask {
      background-repeat: no-repeat;

      position: absolute; /* 固定定位，使遮盖层不随页面滚动而移动 */
      top: 0; /* 顶部对齐 */
      left: 0; /* 左侧对齐 */
      width: 100%; /* 宽度100% */
      height: 100%; /* 高度100% */
      background-size: contain;
      z-index: 999; /* 确保遮盖层在其它元素之上 */
      transition: all 3s;
      opacity: 1;
      &:hover {
        transition: all 0.3s;
        opacity: 0;
      }
    }
  }
}
</style>
